<template>
  <div>
  <div id="app">
    <div id="header">
    <span id="header_left">
    <a href="/">严选车</a> |
    <a href="/detail">买车</a> |
    <a href="/saleCar">卖车</a> |
    <a href="/forumIndex">论坛</a> |
      <a href="/serviceGuarantee">服务保障</a> |
      <a href="/partner">加盟合伙人</a>
    </span>
      <span style="float: right">
    <el-button style="margin-right: 20px;background-color: #ffa14d" @click="open">咨询车况</el-button>
    <el-button style="margin-right: 40px;background-color: #ff6b23" @click="open">砍价</el-button>
        </span>
    </div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 69px">
        <el-breadcrumb-item>宁波二手车</el-breadcrumb-item>
        <el-breadcrumb-item>宁波二手车出售</el-breadcrumb-item>
        <el-breadcrumb-item>测试数据1</el-breadcrumb-item>
        <el-breadcrumb-item>测试数据2</el-breadcrumb-item>
        <span style="float: right;position: relative">
            <el-input type="text" placeholder="请输入内容">
                <!--slot="append" 设置搜索按钮嵌入到文本框里面-->
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </span>
      </el-breadcrumb>
    </div>
  </div>
  <div class="imgBox" style="float:left;position: relative">
    <img class="img-slide img1" src="images/cars/BM1.jpg" alt="1" style="width: 600px;height: 400px">
  </div>
  <div class="r-basic__info" style="float:left;position: absolute;margin: 0px 700px">
    <h1 class="title">
      <img src="//img1.rrcimg.com/_next/static/src/assets/yanxuan-icon_2pJ-s.png" alt="严选车">{{modelGo}}
    </h1>
    <ul class="tags clearfix">
      <li class="tag" style="background-color:#9298B0">自营</li>
      <li class="tag" style="background-color:#9298B0">急售</li>
      <li class="tag" style="background-color:#9298B0">0过户</li>
    </ul>
    <div class="price">
      <p class="carprice clearfix">
      <span class="newcar-price">
        <span class="num">
          33.00
        </span>万</span>
        <span class="newcar-price-tax">新车含税<span class="num-tax">{{car.price}}</span>万<i class="iconfont icon-tip-icon2-07d8d303"></i>
      </span>
        <span class="cut-tip">降价提醒</span>
      </p>
      <p class="servicefee clearfix">
        <span>服务费</span>
        <span class="fee">车价×8%</span>
        <span class="detail" data-click="car-detail_basicinformation-servicedetail_click">查看详情&nbsp;&gt;</span>
      </p><ul class="service clearfix">
      <li class="service-item">
        <i class="iconfont">
        </i>249项检测</li>
      <li class="service-item">
        <i class="iconfont">

        </i>90天可退</li><li class="service-item">
      <i class="iconfont">

      </i>调表车赔付</li>
      <li class="service-item">
        <i class="iconfont">

        </i>禁售盗抢查封车</li>
      <li class="service-item">
        <i class="iconfont">

        </i>代办过户</li>
      <li class="service-item">
        <i class="iconfont">

        </i>14天无忧退</li>
    </ul>
    </div>
    <ul class="parameters">
      <li class="parameter">
        <p class="value">{{car.course}}<!-- -->万公里</p>
        <p class="name">表显里程</p>
      </li>
      <li class="parameter">
        <p class="value">4年2个月</p>
        <p class="name">上牌</p>
      </li>
      <li class="parameter">
        <p class="value">天津</p>
        <p class="name">车辆所在地</p>
      </li><li class="parameter">
      <p class="value">国五<i class="iconfont icon-tip-icon2-07d8d303">
      </i></p><p class="name">
      <a class="qian" target="_blank" rel="noopener noreferrer" click="basicinformation-qian_click">外迁查询</a>
    </p></li><li class="parameter">
      <p class="value">自动</p>
      <p class="name">变速箱</p>
    </li>
      <li class="parameter" data-hover="car-detail_basicinformation-configuration-transfernote_hover">
        <p class="value">0<!-- -->次<i class="iconfont icon-tip-icon2-07d8d303">
        </i>
        </p>
        <p class="name">过户记录</p>
      </li>
    </ul>
    <span style="float: right">
    <el-button style="margin-right: 20px;background-color: #ffa14d">咨询车况</el-button>
    <el-button style="margin-right: 40px;background-color: #ff6b23">砍价</el-button>
        </span>
    <p>电话咨询</p>
    <p>400-050-9352</p>
  </div>
  <div>
    <img class="img-slide img1" src="" alt="1" style="margin: 300px 0px">
  </div>
  <div id="r-footer">
    <div class="r-footer-container">
      <div class="baozhang"></div>
      <div class="link-clearfix">
        <div class="link-left">
          <div class="link-left_item">
            <div class="link-left_item-title">关于我们</div>
            <ul>
              <li><a href="">公司介绍</a></li>
              <li><a href="">联系我们</a></li>
              <li><a href="">加入我们</a></li>
              <li><a href="">加盟合伙人</a></li>
            </ul>
            <ul>
              <li><a href="">用户服务协议</a></li>
              <li><a href="">隐私政策</a></li>
              <li><a href="">法律声明</a></li>
              <li><a href="">协议及声明</a></li>
            </ul>
          </div>
          <div class="link-left_item" style="width: 140px">
            <div class="link-left_item-title">交易流程</div>
            <ul>
              <li><a href="">买车流程</a></li>
              <li><a href="">卖车流程</a></li>
              <li><a href="">异地购车</a></li>
            </ul>
          </div>
          <div class="link-left_item">
            <div class="link-left_item-title">二手车精选</div>
            <ul>
              <li><a href="">车型库</a></li>
              <li><a href="">二手车资讯</a></li>
              <li><a href="">二手车问答</a></li>
            </ul>
            <ul>
              <li><a href="">二手车估价</a></li>
              <li><a href="">二手车迁入标准</a></li>
            </ul>
          </div>
        </div>
        <div class="link-right">
          <div class="link-right_tel">
            <div class="number">400-039-6051</div>
            <div class="time">周一至周日 9:00-18:00</div>
            <div class="text">免费咨询(咨询、建议、投诉)</div>
          </div>
          <div class="link-right_app">
            <div class="r-item">
              <span>关注微信</span>
              <div class="lazyload">
                <img src="salecar_img/wechat.jpg" alt="" style="width: 100%;">
              </div>
            </div>
            <div class="r-item">
              <span>下载APP</span>
              <div class="lazyload">
                <img src="salecar_img/down-app.png" alt="" style="width: 100%;">
              </div>
            </div>
          </div>
          <div class="link-right_sns">
          </div>
        </div>
      </div>
    </div>
    <div id="r-footer-copyright">
      <div class="r-footer-copyright-container">
        <img src="salecar_img/wangbei.png" alt="" >
      </div>
    </div>
  </div>
  </div>
</template>

<script>

import axios  from "axios";

export default {
  data() {
    return {
      modelGo:'',
      car:{
        course:'11',
        price:'11',
        url:'images/cars/BM1.jpg'

      }
    }
  },

  methods: {
    open() {
          this.$router.push('/carReservation');
        },
    getDetails() {
      let url = 'http://localhost:5081/cars/{model}' + this.modelGo;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        this.article = jsonResult.data;
        let artUrl = 'http://localhost:5081/cars/' + this.modelGo;
        this.axios.get(artUrl).then((response) => {
          let jsonResult = response.data;
          this.user = jsonResult.data;
        })
      });

    }
      },
  created: function (){
    this.modelGo=this.$route.query.modelGo;
    console.log(this.$route);
  },

  mounted() {
    this.getDetails();
  }
}
</script>

<style scoped>
#header{
  background-color: #8b8f9c;
  width: 100%;
  height: 60px;
  line-height: 60px;
}
#header_left a{
  text-decoration: none;
  color: white;

}
#header_left a:hover{
  color: #ff6b23;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
#r-footer {
  background-color: #4c4c4c;
  width: 100%;
  height: 400px;
}
.r-footer-container {
  width: 1200px;
  height: 320px;
  margin: 0 auto;

}

.baozhang {
  height: 74px;
  font-size: 16px;
  color: #fff;
  background-image: url("../assets/partner_img/sns1.png");
}

.link-clearfix {
  width: 1200px;
  height: 160px;
  margin: 40px auto;
}

.link-left {
  width: 758px;
  height: 123px;
  float: left;
}

.link-left_item {
  width: 300px;
  height: 123px;
  margin-bottom: 6px;
  display: inline-block;
  vertical-align: top;
}

.link-left_item-title {
  width: 234px;
  height: 21px;
  font-size: 16px;
  color: #fff;
  margin: 0 0 10px 0;
}
.link-right_app{
  float: left;
  width: 272px;
  height: 136px;
}
.r-item{
  width: 88px;
  float: left;
  text-align: center;
  margin-left: 32px;
}
.r-item>span{
  color: #bbbbbb;
  padding-bottom: 8px;
  margin: 0 auto;
}
ul {
  display: inline-block;
  padding: 0;
  margin: 0 40px 0 0;
  vertical-align: top;
}

li {
  line-height: 24px;
  font-size: 14px;
  list-style: none;
}

li > a {
  color: #adadad;
}
.text {
  font-size: 14px;
}
.r-basic__info {
  width: 540px;
  margin-left: 60px;
  float: left;
}
.title {
  font-size: 18px;
  color: #222;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tag {
  float: left;
  border-radius: 2px;
  margin-left: 4px;
  padding: 0 5px;
  height: 17px;
  max-width: 80px;
}
.tags {
  height: 17px;
  overflow: hidden;
  margin: 13px 0;
  color: #fff;
}
.price {
  min-height: 154px;
  background-color: #fafafa;
  padding: 0 20px;
  font-size: 14px;
}
.price .carprice {
  height: 60px;
  line-height: 60px;
  border-bottom: 2px dashed #ddd;
}
.num {
  display: inline-block;
  min-width: 2em;
  font-size: 30px;
}
.num-tax {
  display: inline-block;
  min-width: 2em;
}
.cut-tip {
  display: inline-block;
  height: 27px;
  line-height: 27px;
  padding: 0 7px;
  float: right;
  color: #ff6b23;
  background-color: #fff;
  border: 1px solid #ffa14d;
  border-radius: 4px;
  margin-top: 17px;
  cursor: pointer;
}
.price .servicefee {
  color: #bbb;
  line-height: 32px;
}
.price .service {
  display: inline-block;
  margin-left: 62px;
  color: #777;
}
.servicefee .fee {
  color: #333;
  margin-left: 20px;
}
.servicefee .detail {
  float: right;
  font-size: 12px;
  cursor: pointer;
}
.service-item {
  display: inline-block;
  margin-right: 34px;
  float: left;
}
.iconfont {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  margin-right: 6px;
  color: #bdbdbd;
}
.service-item {
  display: inline-block;
  margin-right: 34px;
  float: left;
}
.parameters {
  display: inline-block;
  margin-top: 25px;
}
.parameters .parameter {
  display: inline-block;
  float: left;
  min-width: 125px;
  padding: 0 13px;
  margin: 11px 0;
  text-align: center;
}
.parameters .parameter .value {
  font-size: 18px;
  color: #333;
}
.parameters .parameter .name {
  font-size: 14px;
  color: #bbb;
}


</style>